<template>

    <!-- 登录页面 -->

    <div class="login">
        <div class="forms">
            <div style="background-color: #fff;width: 400px;padding: 30px;">
                <h3>圈子管理系统</h3>
                <el-form ref="forms" :rules="rules" :model="ruleForm">
                    <el-form-item prop="username">
                        <el-input v-model="ruleForm.username" placeholder="请输入用户名" prefix-icon="el-icon-user"
                            clearable></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" v-model="ruleForm.password" autocomplete="off"
                            prefix-icon="el-icon-view" placeholder="请输入密码" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button icon="el-icon-eleme" type="primary" class="submit"
                            @click="submitForm()">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>

    </div>
</template>

<script>
export default {
    data() {
        return {
            ruleForm: {
                username: 'admin',
                password: '123456',
            },
            rules: {
                username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                // validator设定规则内容
                // pass: [{ validator: validatePass, trigger: 'blur' }],
            },
            message: '',
        };
    },
    methods: {
        submitForm() {
            this.$refs["forms"].validate(valid => {
                if (valid) {
                    this.$axios.post("/admin/login",{
                            username: this.ruleForm.username,
                            password: this.ruleForm.password
                        }).then(res => {

                       
                        if (res.data.code == 0) {
                            // 本地存储,存放token
                            localStorage.setItem("Admin-Token", res.data.data.token)
                            localStorage.setItem("adminInfo", JSON.stringify(res.data.data.userInfo))
                            this.$message({
                                type: 'success',
                                message: '登录成功!'
                            });

                            this.$router.push("user")

                        } else {
                            this.$message.error(res.data.errmsg)
                        }
                    })
                        .catch(e => {
                            console.log(e)
                        })
                }
            })

        }
    }
}
</script>

<style scoped>

.login {
    background-image: url("../assets/26.jpg");
    height: 100vh;
  width: 100vw;
    background-repeat: no-repeat;
    /* background-position: 0%; */
    /* background-color: #9e9e9ea1; */
    background-size: cover;
}

.forms {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.submit {
    width: 100%;
}
</style>
